import { Button, Image, Text, View } from "@tarojs/components";
import Taro from '@tarojs/taro';
import { useState } from "react";
import lieb from "/lib/svg/列表.svg";

export default function BtnList() {

  const list = [
    { name: '人员信息', code: '1', path: '/pages/personalInformation/index', src: lieb },
    { name: '质询客服', code: '2', path: '', src: lieb },
    { name: '修改密码', code: '3', path: '', src: lieb },
    { name: '人员激活', code: '4', path: '', src: lieb },
    { name: '操作手册', code: '5', path: '', src: lieb },
    { name: '我的积分', code: '6', path: '', src: lieb },
    { name: '退出登录', code: '7', path: '', src: lieb },
  ]
  const [isScanning, setIsScanning] = useState(false);

  const handleScan = async () => {
    if (isScanning) return;
    setIsScanning(true);
    try {
      const res = await Taro.scanCode({
        scanType: ['qrCode'],
        onlyFromCamera: true,
      });
      Taro.showToast({ title: `结果：${res.result}`, icon: 'none' });
    } catch (error) {
      console.error('扫码失败', error);
      Taro.showToast({ title: '扫码失败', icon: 'none' });
    } finally {
      setIsScanning(false);
    }
  };
  const handleGoView = (path) => {
    Taro.navigateTo({url:path})
  }
  return (
    <View>
      <View className="work" >
        <Button className="btn btnLeft" onClick={handleScan} disabled={isScanning}>
          <Image src={lieb} className="imgCl" />
          上班
        </Button >
        <Button className="btn btnRigth" onClick={handleScan} disabled={isScanning}>
          下班  
          <Image src={lieb} className="imgCl" />
        </Button >
      </View>
      <View style={{ marginTop: '10px', display: 'grid', gridTemplateColumns: 'repeat(5, 1fr)', gap: '12px', padding: '0 10px' }}>
        {list.map((i) => <View key={i.code} onClick={() => handleGoView(i.path)} style={{ display: "flex", flexDirection: 'column', justifyContent: 'center', alignItems: 'center' }}>
          <Image src={lieb} style={{ width: '36px', height: '36px' }} />
          <Text style={{ fontSize: '12px', marginTop: '4px' }}>  {i.name}</Text>
        </View>)}
      </View>
    </View>
  )
}  